<template>
  <div>
    <MForm :fields="fields" @submit="search" @cancel="search"> </MForm>

    <MTable
      :columns="columns"
      :http="menuTreeselect"
      :params="params"
      :paginationConfig="false"
      v-model:isReload="isReload"
      v-model:selectKeys="selectKeys"
    >
      <template #extra>
        <el-button
          v-if="$checkAuth('systemRolePermAdd')"
          type="primary"
          @click="edit(0)"
          >新增</el-button
        >
        <MDeleteButton
          v-if="$checkAuth('systemRolePermDelBatch')"
          :http="menuDel"
          :http-key="false"
          :selectKeys="selectKeys"
          @reload="clearSelectKeysReload"
        ></MDeleteButton>
      </template>

      <template #actions="{ row }">
        <MA
          v-if="$checkAuth('systemRolePermAdd')"
          type="primary"
          @click="addChildren(row)"
          >新增下级</MA
        >
        <MA
          v-if="$checkAuth('systemRolePermEdit')"
          type="primary"
          @click="edit(row.id)"
          >编辑</MA
        >
      </template>
    </MTable>

    <MFormDialog
      v-model="formDialog.visible"
      v-bind="formDialog"
      :fields="dialogFields"
      :handler="handler"
      :httpAdd="menuAdd"
      :httpEdit="menuEdit"
      :httpGet="menuDetails"
      @reload="reload"
    ></MFormDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { columns, fields, dialogFields } from './config'
import {
  menuTreeselect,
  menuAdd,
  menuDel,
  menuDetails,
  menuEdit
} from '@/api/system/rolePermission'

defineOptions({
  name: 'Demo'
})

// 搜索
const params = ref<any>({})
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
}

// 新增/编辑
const formDialog = reactive({
  visible: false,
  id: 0
})
const edit = (id: number) => {
  formDialog.id = id
  formDialog.visible = true
}

// 添加下级
const addChildData = {
  parentId: undefined
}
const addChildren = (row: any) => {
  addChildData.parentId = row.id
  edit(0)
}

const handler = (data: any) => {
  return {
    ...addChildData,
    ...data
  }
}

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
  addChildData.parentId = undefined
}

// 删除reload
const selectKeys = ref<number[]>([])
const clearSelectKeysReload = () => {
  selectKeys.value = []
  reload()
}
</script>

<style lang="scss" scoped></style>
